<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="index.css"/>
    <style>

    </style>


</head>
<body>



<div class="box1" id="box_1">
    <!--加载-->
    <div id="loading" class="tu1">
        <img src="./img/11.gif" class="img1" id="img_1"/>
        <img src="./img/666.png" class="img2" id="img_2"/>
    </div>

    <!--开始游戏页面-->
    <div class="tu2" id="kai">
        <div class="div5">
            <img src="./img/logo.png" alt="haha"/>
            <span class="hh1" onclick="kai_1()">开始游戏</span>
            <br/>
            <span class="hh2" onclick="kai_2()">游戏说明</span>
            <br/>
        <span class="hh3"
              onclick="window.opener=null;window.open('','_self');window.close();">离开游戏</span>
        </div>
    </div>

    <!--游戏说明-->
    <div class="tu3" id="sm">
        <img src="./img/3.png" alt="haha" class="img5" onclick="cha()"/>
        <img src="./img/1.png" alt="haha" class="img3"/>
        <img src="./img/4.png" alt="haha" class="img6" onclick="xia()"/>
    </div>

    <div class="tu4" id="sm1">
        <img src="./img/3.png" alt="haha" class="img5" onclick="cha1()"/>
        <img src="./img/2.png" alt="haha" class="img4"/>
    </div>

    <div class="tu5" id="wz" onclick="wz_1()">
        <p class="p1" id="p1_1">这是一个很难玩的游戏，千万不能玩，否则会上瘾的！！！！！！</p>
        <p class="p2"> 单击跳过</p>
    </div>

</div>




<!--游戏-->
<div class="box" id="box11">
    <!--左边-->
    <div class="infobox">
        <div class="infobox_1">
            <br/>
            <br/>
            <span class="span1">欢迎试玩魔塔小游戏</span>
            <br/>
            <br/>
            <span class="span2">本游戏简单易懂</span>
            <br/>
            <br/>
            <span class="span3">上手容易</span>
            <br/>
            <br/>
            <span class="span3">技术有限</span>
            <br/>
            <br/>
            <span class="span3">BUG 较多</span>
            <br/>
            <br/>
            <span class="span3">敬请谅解</span>
            <br/>
            <br/>
            <br/>
            <div class="sm">
                <p class="smm">说明：此版本为变态版，吃到可达鸭即可通关！</p>
            </div>

      </div>

    </div>
    <!--遇怪弹出框-->
    <div class="dgs" id="dgs_1">
        <!--英雄血条-->
        <div style="float: left;display: inline-block">
            <img src="img/xx.png" alt="haha" class="_yx"/>
            <br/>
            <div class="ying">
                <div class="ying_1" id="xue_1"></div>
            </div>
        </div>

        <!--怪物血条-->
        <div style="float: right;display: inline-block; width: 183px;height: 111px" id="gwx">
            <img src="img/gw2.png" alt="haha" class="_gw"/>
            <br/>
            <div class="guai">
                <div class="ying_2" id="xue_2"></div>
            </div>
        </div>
    </div>

    <div class="tgl" id="tgl_1" onclick="djx_1()">
        <span class="tong">恭喜你通关啦!</span>
        <span class="tong1">点击关闭游戏</span>
    </div>

    <!--右边-->
    <div  id="gameBox">


        <!--<img class="gs"  src="img/xs.png">-->
    </div>
</div>

<!--关闭按钮-->
<!--<a href="#"  onclick="window.opener=null;window.open('','_self');window.close();">关闭页面</a>-->


<script>

//加载
    function run(){
        setInterval(function(){

            document.getElementById("img_1").style.display="block";
        },0);
    }
run();

    function run_1(){
        setInterval(function(){
            document.getElementById("img_1").style.display="none";
            document.getElementById("img_2").style.display="block";

        },2500);
    }
run_1();

    function run_2(){
         setInterval(function(){
            document.getElementById("loading").style.display="none";
             document.getElementById("kai").style.display="block";
        },5000);
    }
run_2();

//序幕

var sy2=document.getElementById("p1_1"),sy3,sy4=500;
sy3=setInterval(function(){
    sy4=sy4-5;
    sy2.style.paddingTop=sy4+"px";
    if(sy4==0){
        clearInterval(sy3);
        document.getElementById("wz").style.display="none";
    }

},150);

function wz_1(){
    document.getElementById("wz").style.display="none";
    document.getElementById("kai").style.display="block";


}


//    开始页面

//开始游戏
    function kai_1(){
            document.getElementById("box_1").style.display="none";
            document.getElementById("box11").style.display="block";

    }
//游戏说明
    function kai_2(){
        document.getElementById("kai").style.display="none";
        document.getElementById("sm").style.display="block";


//说明擦除1
    }
    function cha(){
        document.getElementById("sm").style.display="none";
        document.getElementById("kai").style.display="block";

//说明下一张
    }
    function xia(){
        document.getElementById("sm").style.display="none";
        document.getElementById("sm1").style.display="block";
//说明擦除2
    }
    function cha1(){
        document.getElementById("sm1").style.display="none";
        document.getElementById("kai").style.display="block";


    }




//游戏

var _dd=0;
var xue=100;
var xue2=100;
var lou=1;
var gwsl=0;

    window.onload = function(){


        var ary = [
            [1,1,1,1,1,1,7,1,1,1,1,1,1,1,1,1,1,1],
            [1,0,6,1,0,0,0,0,0,0,5,0,0,0,0,0,0,1],
            [1,1,5,1,0,0,0,1,1,0,1,1,1,1,1,0,5,1],
            [1,0,0,0,5,1,1,1,0,0,0,0,5,1,1,0,0,1],
            [1,0,0,0,1,0,5,0,1,1,1,1,1,1,1,5,1,1],
            [1,0,0,0,1,0,1,0,5,0,0,0,0,0,0,0,0,1],
            [1,1,1,0,1,1,1,1,0,1,1,1,1,1,1,1,1,1],
            [1,0,0,0,0,0,1,0,5,0,1,1,0,0,0,0,0,1],
            [1,0,0,0,1,0,1,1,1,0,0,5,1,1,1,0,0,1],
            [1,0,0,0,1,0,0,1,1,1,1,1,1,0,0,0,0,1],
            [1,1,1,5,1,0,0,1,0,0,5,0,1,1,1,1,0,1],
            [1,0,1,6,1,0,0,1,6,0,1,0,0,0,0,0,0,1],
            [1,0,1,1,1,0,0,1,1,1,1,1,1,1,1,0,1,1],
            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
            [1,1,1,1,1,4,1,1,1,1,1,1,1,1,4,1,1,1],
            [1,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,1],
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
        ];


        var ary2= [
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            [1,1,6,1,0,1,0,7,1,0,1,0,0,4,0,0,0,1],
            [1,0,4,1,0,0,0,1,0,4,1,0,0,1,1,0,0,1],
            [1,0,1,0,4,1,1,1,0,0,0,0,0,1,1,0,0,1],
            [1,4,1,0,1,0,4,0,1,1,1,1,1,1,1,4,1,1],
            [1,0,0,0,1,0,0,0,4,0,0,0,0,0,0,0,0,1],
            [1,1,1,0,1,1,1,1,0,1,1,1,1,1,1,1,1,1],
            [1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,1],
            [1,0,0,0,1,0,1,1,6,0,0,4,0,0,0,0,0,1],
            [1,0,0,0,1,0,0,1,1,1,1,1,1,0,0,0,0,1],
            [1,1,1,4,1,0,0,1,0,0,0,0,1,1,1,1,0,1],
            [1,0,1,6,1,0,0,1,6,0,1,0,0,0,0,0,0,1],
            [1,0,1,1,1,0,0,1,1,1,1,1,1,1,1,0,1,1],
            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
            [1,1,1,1,1,4,1,1,1,1,1,1,1,1,4,1,1,1],
            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
            [1,1,1,1,1,1,1,1,1,1,1,7,1,1,1,1,1,1]
        ];


        var ary3= [
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            [1,4,6,1,0,1,6,1,1,6,1,0,4,4,0,4,8,1],
            [1,0,1,1,0,0,0,1,0,4,1,4,1,1,1,4,4,1],
            [1,0,0,0,4,1,1,4,4,0,4,0,4,1,1,0,1,1],
            [1,0,0,0,1,0,1,4,1,1,1,1,1,1,1,4,1,1],
            [1,0,0,0,1,4,4,0,4,0,4,0,4,0,0,4,0,1],
            [1,1,1,0,1,1,1,1,0,1,1,1,1,1,1,1,1,1],
            [1,0,0,0,0,0,1,0,0,4,0,0,0,0,4,0,0,1],
            [1,0,0,0,1,0,1,1,6,0,0,4,1,0,1,1,0,1],
            [1,0,0,0,1,0,0,1,1,1,1,1,1,0,0,0,0,1],
            [1,1,1,4,1,1,0,1,0,0,4,0,1,1,1,1,0,1],
            [1,0,1,6,1,0,0,1,6,0,1,0,0,0,4,0,0,1],
            [1,0,1,1,1,0,0,1,1,1,1,1,1,1,1,0,1,1],
            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
            [1,1,1,1,1,4,1,1,1,1,1,1,1,1,4,1,1,1],
            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
            [1,1,1,1,1,1,1,1,1,1,1,7,1,1,1,1,1,1]
        ];



        // 长度为24 宽度为16
        var W_x = 15,W_y = 4;


        console.log(ary[16][23]);

//        执行区

        document.body.onkeydown = WallDetection;
        Upload(1,ary);

//        函数区
        /*    墙壁检测-函数*/
        function WallDetection(){

            WallDetectionDate();
            //console.log("W_x"+W_x+"  W_y"+W_y);

        }


        /*    墙壁检测-移动数据-函数*/
        function WallDetectionDate(detection){
            var eve = event.keyCode;
//          判断键盘按键
//            上
            console.log("W_x"+W_x+"  W_y"+W_y);

            if(eve == 38&&_dd==0){

//                判断是否撞墙  边界检测
                if(W_x>0 && ary[W_x-1][W_y]==0){
                    console.log("W_x"+W_x+"  W_y"+W_y);
                    ary[W_x][W_y] = 0;
                    W_x = W_x-1;
                    W_y = W_y;
                    ary[W_x][W_y] = 3;
                    Upload("38",ary);
                }

//                上2楼
                else if(W_x>0 && ary[W_x-1][W_y]==7&&gwsl>=14 ){
                    _dd=0;
                    ary=ary2;
                    ary[W_x][W_y] = 0;
                    W_x = W_x;
                    W_y = W_y;
                    ary[W_x][W_y] = 3;
                    Upload("38",ary);
                    }else if(W_x>0 && ary[W_x-1][W_y]==7&&gwsl<14){
                    alert("请将怪物杀完！")

                    }


//            上遇怪1
                else if(W_x>0 && ary[W_x-1][W_y]==4){
                    gwsl+=1;
                    _dd=1;
                    xue-=20;
                    xue2=100;
                    guai();
                    aa();
                    ary[W_x][W_y] =0;
                    W_x = W_x-1;
                    W_y = W_y;
                    ary[W_x][W_y] = 3;
                    Upload("38",ary);
                }
//            上遇怪2
                else if(W_x>0 && ary[W_x-1][W_y]==5){
                    gwsl+=1;
                    _dd=1;
                    xue-=10;
                    xue2=100;
                    guai();
                    aa();
                    ary[W_x][W_y] = 0;
                    W_x = W_x-1;
                    W_y = W_y;
                    ary[W_x][W_y] = 3;
                    Upload("38",ary);
                }
//                上遇血瓶
                else if(W_x>0 && ary[W_x-1][W_y]==6){
                    _dd=1;
                    xue=100;
                    xue2=100;
                    _xue();
                    aa();
                    ary[W_x][W_y] = 0;
                    W_x = W_x-1;
                    W_y = W_y;
                    ary[W_x][W_y] = 3;
                    Upload("38",ary);
                }
//                上遇可达鸭
                else if(W_x>0 && ary[W_x-1][W_y]==8){
                    tg();
                    ary[W_x][W_y] = 0;
                    W_x = W_x-1;
                    W_y = W_y;
                    ary[W_x][W_y] = 3;
                    Upload("38",ary);
                }


            }
//            下
            if(eve == 40&&_dd==0){

                if( W_x<16 && ary[W_x+1][W_y]==0){
                    ary[W_x][W_y] = 0;
                    W_x = W_x+1;
                    W_y = W_y;
                    ary[W_x][W_y] = 3;
                    Upload(40,ary);
                }
                //                上3楼
                else if( W_x<16 && ary[W_x+1][W_y]==7&&gwsl>=25){
                    _dd=0;
                    ary=ary3;
                    ary[W_x][W_y] = 0;
                    W_x = W_x;
                    W_y = W_y;
                    ary[W_x][W_y] = 3;
                    Upload("38",ary);
                }else if( W_x<16 && ary[W_x+1][W_y]==7&&gwsl<25){
                    alert("请将怪物杀完！")

                }




//            下遇怪
                else if(W_x<16 && ary[W_x+1][W_y]==4){
                    gwsl+=1;
                    _dd=1;
                    xue-=20;
                    xue2=100;
                    guai();
                    aa();
                    ary[W_x][W_y] = 0;
                    W_x = W_x+1;
                    W_y = W_y;
                    ary[W_x][W_y] = 3;
                    Upload(40,ary);

                    }else if(W_x<16 &&ary[W_x+1][W_y]==5){
                    gwsl+=1;
                    _dd=1;
                    xue-=10;
                    xue2=100;
                    guai();
                    aa();
                    ary[W_x][W_y] = 0;
                    W_x = W_x+1;
                    W_y = W_y;
                    ary[W_x][W_y] = 3;
                    Upload(40,ary);
                }
//                下遇血瓶
                else if(W_x<16 &&ary[W_x+1][W_y]==6){
                    _dd=1;
                    xue=100;
                    xue2=100;
                    _xue();
                    aa();
                    ary[W_x][W_y] = 0;
                    W_x = W_x+1;
                    W_y = W_y;
                    ary[W_x][W_y] = 3;
                    Upload(40,ary);
                }


            }
//             左

            if(eve == 37&&_dd==0){

                if( W_y>0 && ary[W_x][W_y-1]==0){
                    ary[W_x][W_y] = 0;
                    W_x = W_x;
                    W_y = W_y-1;
                    ary[W_x][W_y] = 3;
                    Upload(37,ary);
                }

//                左遇怪
                else if(W_x>0 && ary[W_x][W_y-1]==4){
                    gwsl+=1;
                    _dd=1;
                    xue-=20;
                    xue2=100;
                    guai();
                    aa();
                    ary[W_x][W_y] = 0;
                    W_x = W_x;
                    W_y = W_y-1;
                    ary[W_x][W_y] = 3;
                    Upload(37,ary);
                }else if(W_x>0 && ary[W_x][W_y-1]==5){
                    gwsl+=1;
                    _dd=1;
                    xue-=10;
                    xue2=100;
                    guai();
                    aa();
                    ary[W_x][W_y] = 0;
                    W_x = W_x;
                    W_y = W_y-1;
                    ary[W_x][W_y] = 3;
                    Upload(37,ary);
                }
                //                左遇血瓶
                else if(W_x>0 && ary[W_x][W_y-1]==6){
                    _dd=1;
                    xue=100;
                    xue2=100;
                    _xue();
                    aa();
                    ary[W_x][W_y] = 0;
                    W_x = W_x;
                    W_y = W_y-1;
                    ary[W_x][W_y] = 3;
                    Upload(37,ary);
                }

            }
//            右
            if(eve == 39&&_dd==0){

                if( W_y<23 &&ary[W_x][W_y+1]==0){
                    ary[W_x][W_y] = 0;
                    W_x = W_x;
                    W_y = W_y+1;
                    ary[W_x][W_y] = 3;
                    Upload(39,ary);
                }
//                右遇怪
                else if(W_x<23 && ary[W_x][W_y+1]==4){
                    gwsl+=1;
                    _dd=1;
                    xue-=20;
                    xue2=100;
                    guai();
                    aa();
                    ary[W_x][W_y] = 0;
                    W_x = W_x;
                    W_y = W_y+1;
                    ary[W_x][W_y] = 3;
                    Upload(39,ary);
                }else if(W_x<23 && ary[W_x][W_y+1]==5){
                    gwsl+=1;
                    _dd=1;
                    xue-=10;
                    xue2=100;
                    guai();
                    aa();
                    ary[W_x][W_y] = 0;
                    W_x = W_x;
                    W_y = W_y+1;
                    ary[W_x][W_y] = 3;
                    Upload(39,ary);
                }
//                右遇血瓶
                else if(W_x<23 && ary[W_x][W_y+1]==6){
                    _dd=1;
                    xue=100;
                    _xue();
                    ary[W_x][W_y] = 0;
                    W_x = W_x;
                    W_y = W_y+1;
                    ary[W_x][W_y] = 3;
                    Upload(39,ary);
                }
                //                右遇可达鸭
                else if(W_x<23 && ary[W_x][W_y+1]==8){
                    tg();
                    ary[W_x][W_y] = 0;
                    W_x = W_x;
                    W_y = W_y+1;
                    ary[W_x][W_y] = 3;
                    _dd=1;
                    Upload(39,ary);
                }

            }
//            Upload(1,ary);
        }

//         核心检测-函数
        function Boundary(){

        }

//        地图加载=函数
        function Upload(num,aryDate){
            var date = "";

            for(var i=0;i<aryDate.length;i++){
                for(var j=0;j<aryDate[i].length;j++){
                    console.log(1);
                    if(aryDate[i][j]==0){
                        date = date+"<div class='map'></div>";
                    }else if(aryDate[i][j]==1){
                        date = date+"<div class='wall'></div>";

                    }else if(aryDate[i][j]==3){
                        if(num==37){
                            date = date+"<img class='gs'  src='img/xz.png'>";
                        }else if(num==38){
                            date = date+"<img class='gs'  src='img/xs.png'>";
                        }else if(num==39){
                            date = date+"<img class='gs'  src='img/xy.png'>";
                        }else if(num==40){
                            date = date+"<img class='gs'  src='img/xx.png'>";
                        }else{
                            date = date+"<img class='gs'  src='img/xx.png'>";
                        }




                    }else if(aryDate[i][j]==4){
                        date = date+"<img class='monster'  src='img/gw2.png'>";
                    }else if(aryDate[i][j]==5){
                        date = date+"<img class='monster'  src='img/gw1.png'>";
                    }else if(aryDate[i][j]==6){
                        date = date+"<img class='monster'  src='img/xue1.png'>";
                    }else if(aryDate[i][j]==7){
                        date = date+"<img class='monster'  src='img/sl.png'>";
                    }else if(aryDate[i][j]==8){
                        date = date+"<img class='monster'  src='img/kdy.gif'>";
                    }
                }
            }
            document.getElementById("gameBox").innerHTML = date;
        }

//        function UploadType(arry){
//
//        }

    };


//遇血瓶
function _xue(){
    document.getElementById("dgs_1").style.opacity="1";
    document.getElementById("gwx").style.display="none";
    setTimeout(document.getElementById("xue_1").style.width= xue +"%",2000);
    setTimeout(document.getElementById("xue_2").style.width= xue2 +"%",2000);

    setTimeout(function(){
        document.getElementById("dgs_1").style.opacity="0";
        _dd=0;
    },2500);

}

//通关
function tg(){
    document.getElementById("tgl_1").style.opacity="1";

}
function djx_1(){
    document.getElementById("tgl_1").style.opacity="0";
    document.getElementById("box11").style.display="none";
    document.getElementById("loading").style.display="block";
}



//    声明一个遇怪事件


function guai(){
    document.getElementById("dgs_1").style.opacity="1";
    document.getElementById("gwx").style.display="block";
    setTimeout(document.getElementById("xue_1").style.width= xue +"%",2000);
    setTimeout(document.getElementById("xue_2").style.width= xue2 +"%",2000);

    setTimeout(function(){
        document.getElementById("dgs_1").style.opacity="0";


        if(xue==0){

            alert("游戏结束,但你还能玩变态版！");
//            document.getElementById("box_1").style.display="block";
            document.getElementById("box11").style.display="none";
            setTimeout(document.getElementById("loading").style.display="block",1000);
//            document.getElementById("dgs_1").style.display="none";
            xue=100;
        }
        _dd=0;
    },2500);

}
//怪物血条刷新
function aa(){
    setTimeout(document.getElementById("xue_2").style.width= 0+"%",500);
    setTimeout(function(){
        document.getElementById("xue_2").style.width= "100"+"%";
    },3000);
}


//
//if(xue2==0){
//
//}



</script>
</body>
</html>